<template>
  <div class="shop-info">
    <FlexBox>
      <img class="avatar" :src="data.avatar" alt="">
      <FlexBox direction="column" center-h>
        <div class="name">{{data.name}}</div>
        <div class="desc">{{data.desc}}</div>
      </FlexBox>
    </FlexBox>
  </div>
</template>

<script>
import FlexBox from "@components/flex-box/index.vue";
export default {
  name: "ShopInfo",
  components: {FlexBox},
  props: {
    data: {
      type: Object,
      default: () => {}
    },
  },
  data() {
    return {}
  },
  methods: {},

  created() {

  },

  mounted() {

  }

}
</script>

<style lang="scss" scoped>
.shop-info {
  z-index: 20;
  color: #fff;
  width: 100%;
  padding: 0 20px;
  .avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-right: 10px;
    border: 2px solid rgba(255,255,255, .5);
  }

  .name {
    font-size: 21px;
  }
  .desc {
    font-size: 17.5px;
    opacity: 0.8;
  }
}
</style>
